<template>
   <div class="chart-container">
      <div class="chart-wrapper">
         <div class="chart-column flex-1">
            <div id="chart-box">
               <div id="pieChartBox" style="width: 350px;height: 350px;"></div>
            </div>
         </div>
         <div class="chart-column flex-1">
            <div class="progress-bar">
               <div v-for="item in data" :key="item.name" class="progress-segment">
                  <div class="segment-info">
                     <div>{{ item.name }}</div>
                     <div>{{ item.value }} 人</div>
                     <div>{{ getPercentage(item.value) }}%</div>
                  </div>
                  <div class="segment-bar">
                     <div :style="{ width: getPercentage(item.value) + '%', backgroundColor: item.color }"
                        class="segment-fill"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>


<script>
import * as echarts from 'echarts';
import { getScoreSort } from '@/api/statistics';

export default {
   mounted() {
      this.drawBie();
   },
   data() {
      return {
         data: [],
      }
   },
   methods: {
      //绘制饼状图
      initChart() {
         // const pieChartBox = this.$refs.pieChartBox;
         const pieChartBox = document.getElementById('pieChartBox')
         const pieChart = echarts.init(pieChartBox);

         const totalCount = this.data.reduce((acc, curr) => acc + curr.value, 0);

         const pieOption = {
            title: {
               text: '',
               x: 'center',
            },
            graphic: [{
               type: 'text',
               left: 'center',
               top: 'middle',
               style: {
                  text: `及格率：${((this.data[1].value + this.data[2].value + this.data[3].value + this.data[4].value) / totalCount * 100).toFixed(2)}%`,
                  fontSize: 18,
                  fontWeight: 'bold',
               }
            }],
            tooltip: {
               trigger: 'item',
            },
            series: [
               {
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                     show: false,
                     position: 'center',
                  },
                  labelLine: {
                     show: false,
                  },
                  data: this.data.map(item => ({
                     value: item.value,
                     name: item.name,
                     itemStyle: {
                        color: item.color
                     }
                  })),
               },
            ],
         };
         pieChart.setOption(pieOption);
      },

      //计算及格率
      getPercentage(value) {
         const totalCount = this.data.reduce((acc, curr) => acc + curr.value, 0);
         return (value / totalCount * 100).toFixed(2);
      },

      //调用后端接口获取数据
      async drawBie() {
         //定义模板数组
         const templateData = [
            { value: null, name: '60分以下', color: '#FF6464' },
            { value: null, name: '60~80分之内', color: '#FFB454' },
            { value: null, name: '80~90分之内', color: '#FFF254' },
            { value: null, name: '90~95分之内', color: '#54FF54' },
            { value: null, name: '95分以上', color: '#54D2FF' },
         ];
         //调用接口
         if (!localStorage.getItem('major')) {
            localStorage.setItem('major', 0)
         }
         await getScoreSort(localStorage.getItem('major')).then((res => {
            const data = res.data.data;
            const newData = templateData.map((item, index) => {
               return {
                  value: data[index],
                  name: item.name,
                  color: item.color,
               }
            });
            this.data = newData;
         }))
         this.initChart();
      }
   },
};
</script>

<style scoped>
.chart-container {
   display: flex;
   justify-content: center;
   /* align-items: center; */
   height: 500px;
}

.chart-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
}


/* .chart-column {
   flex: 1;
} */

.progress-bar {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-top: 20px;
}

.progress-segment {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 10px;
}

.segment-bar {
   width: 100%;
   height: 20px;
   background-color: #EEE;
   border-radius: 10px;
   position: relative;
}

.segment-fill {
   height: 100%;
   border-radius: 10px;
}

.segment-info {
   width: 350px;
   display: flex;
   justify-content: space-between;
}
</style>
